<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>四则运算计算器</title>
    <link rel="stylesheet" href="../../css/style.css">
    <style>
        main {
            flex: 1;
        }

        nav {
            width: 100%;
            height: 100%;
            box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);

            box-sizing: border-box;
            padding: 1em;
        }
        nav > ul {
            list-style: none;
            margin: 0;
            padding: 0;

            display: flex;
            gap: 1em;
        }

        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            width: 100%;
            height: 100%;
            box-sizing: border-box;
            padding: 2em;
        }

    </style>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li>
                    <a href="javascript: history.back();">返回上一页</a>
                </li>
                <li>
                    <a href="/">回到首页</a>
                </li>
            </ul>
        </nav>
    </header>

    <main>
        <div class="container">
            <p>输入要计算的式子</p>
            <p>例：一加一</p>
            <form id="form">
                <input type="text" id="input-expression" required>
                <input type="submit" value="计算">
            </form>
            <p style="display: none;">
                结果：
                <span id="result"></span>
            </p>
        </div>
    </main>

    <footer>
        <hr/>
        <p class="copyright">&copy; 2024 尘跃</p>
    </footer>

    <script src="./hanzi-expression-calculate.global.production.js"></script>
    <script>
        function calculate(e) {
            e.preventDefault();
            const 表达式 = document.getElementById('input-expression').value;
            try {
                const 结果 = 汉字式子运算(表达式);
                const resultElement = document.getElementById('result')
                if (!resultElement) {
                    return;
                }
                resultElement.textContent = 结果;
                if (resultElement.parentElement) {
                    resultElement.parentElement.style.display = "block";
                }
            } catch (e) {
                alert(e.message);
            }
        }
        document.getElementById('form').addEventListener('submit', calculate);
    </script>
</body>
</html>

